<template>
  <div class="agentHome">
    <van-nav-bar safe-area-inset-top placeholder :title="userName" left-arrow fixed @click-left="onClickLeft">
      <template #right>
        <van-icon name="replay" size='18' @click='replay()' />
      </template>
    </van-nav-bar>
    <bar @subChange='subChange'></bar> 
    <van-search v-model="search" shape="round" background="#3B3D4E" :placeholder="placeholder" @input="replay()" />
    <router-view :search='search' ref='myChild'></router-view>
  </div>
</template>

<script>
import bar from '../../components/AgentTabs'
export default {
  components: {
    bar
  },
  data() {
    return {
      userName:localStorage.getItem("userName"),
      search:'',
      placeholder:this.$t('AgentName')
    };
  },
  methods: {
    subChange(url){
      this.search = '';
      this.getKeyName(url);
    },
    onClickLeft(){
      this.$router.push({path:'/agentIndex'});
    },
    replay(){
      this.$refs.myChild.replay(this.search)
    },
    getKeyName(txt){
      switch(txt){
        case 'agent':
          this.placeholder=this.$t('AgentName');
          break
        case 'user':
          this.placeholder=this.$t('Username');
          break
        case 'inverter':
          this.placeholder=this.$t('RegistrationNo');
          break
        case 'sites':
          this.placeholder=this.$t('SiteName');
          break
      }
    }
  },
  mounted(){
    this.getKeyName(this.$route.path.split('/')[2]);
  }
};
</script>

<style  lang="less" scoped>
.agentHome{
  .van-hairline--bottom::after{
    border: none;
  }
}
</style>
